<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的钱包</title>
    <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
</head>


<script>

</script>


<style>
    .container{
        width: 800px;
        height: 400px;
        margin-top: 100px;
    }
    .panel-body{
        background-color: rgb(81, 218, 13);
        height: 100px;
    }
    .charge{
        float: right;
    }
    .charge>button{
        width: 50px;
    }
    .mycard{
        margin-left: 200px;
    }
    #page{
        width: 300px;
        margin: 30px auto;
    }
    #updateWallet{
        margin-top: 40px;
        float: right;
    }
</style>
<body>
<div class="container">

    <div class="head">
        <ol class="breadcrumb">
            <li><a href="#" style="font-size: 40px;color: rgb(10, 205, 10);">电子钱包</a></li>
            <a data-toggle="modal" data-target="#myModal" id="updateWallet" >
               修改钱包信息
            </a>
        </ol>
    </div>

    <div class="wallet">
        <!--菜单-->
        <div class="panel panel-default">
            <div class="panel-body" style="color: white;font-size: 40px; line-height: 70px;">
                <i class="bi bi-currency-yen"></i><span>余额:</span><span id="money"></span>
                <button type="button" class="btn btn-default mycard" data-toggle="modal"  data-target="#mycard">我的银行卡</button>
                <div class="charge">
                    <button type="button" class="btn btn-default" data-toggle="modal"  data-target="#charge" onclick="sendType(0)">充值</button>
                    <button type="button" class="btn btn-default" data-toggle="modal"  data-target="#recharge" onclick="sendType(1)">提现</button>
                </div>
            </div>
        </div>
        <!-- 我的银行卡 -->
        <div class="modal fade" id="mycard" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        您的银行卡
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <td>银行</td>
                                <td>卡号</td>
                                <td>余额</td>
                            </tr>
                            </thead>
                            <tbody id="content">
                            <tr>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#insertNewCard">绑定新的银行卡</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 绑定新银行卡 -->
        <div class="modal fade" id="insertNewCard" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">绑定一个新银行卡</h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <div class="input-group-addon">银行名称</div>
                            <input type="text" class="form-control" placeholder="银行名字" aria-describedby="basic-addon1" id="bankName">
                        </div>
                        <br>
                        <div class="input-group">
                            <div class="input-group-addon">银行账号</div>
                            <input type="text" class="form-control" placeholder="银行卡号" aria-describedby="basic-addon1" id="bankNumber">
                        </div>
                        <br>
                        <div class="input-group">
                            <div class="input-group-addon">银行余额</div>
                            <input type="text" class="form-control" placeholder="余额" aria-describedby="basic-addon1" id="balance">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="InsertCard">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 充值 -->
        <div class="modal fade" id="charge" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        输入充值金额
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="bi bi-currency-yen"></i></span>
                            <input id="moneys" class="chargeMoney" type="text"aria-label="Amount (to the nearest dollar)">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-default" data-toggle="modal"   data-target="#ToChooserCard">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 提现 -->
        <div class="modal fade" id="recharge" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        输入提现金额
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="bi bi-currency-yen"></i></span>
                            <input id="rechargemoney" class="chargeMoney" type="text" aria-label="Amount (to the nearest dollar)">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-default" data-toggle="modal"  data-target="#ToChooserCard">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 充值或提现选择银行卡 -->
        <div class="modal fade" id="ToChooserCard" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        选择您的银行卡
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <td>银行</td>
                                <td>卡号</td>
                            </tr>
                            </thead>
                            <tbody id="chooseCharge">
                            <tr>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button  type="button" class="btn btn-default" data-toggle="modal" data-target="#inputPassword">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 输入支付密码 -->
        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" id="inputPassword">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>请输入六位数密码</h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <input type="password" class="form-control" placeholder="password" aria-describedby="basic-addon1" id="password2">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="ToCharge">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--修改验证密码-->
        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>请输入六位数密码</h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <input type="password" class="form-control" placeholder="password" aria-describedby="basic-addon1" id="password1">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button id="toUpdate" type="button"  data-toggle="modal" class="btn btn-primary">确定</button>
                        <button style="display: none" data-toggle="modal" data-target="#UpdateInfo" id="show"></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" id="UpdateInfo">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">修改钱包信息</div>
                    <div class="modal-body">
                    <div class="input-group">
                        <div class="input-group-addon">电话号码</div>
                        <input type="text" class="form-control" placeholder="电话号码" aria-describedby="basic-addon1" id="phone">
                    </div>
                    <br>
                    <div class="input-group">
                        <div class="input-group-addon">身份证号码</div>
                        <input type="text" class="form-control" placeholder="身份证号码" aria-describedby="basic-addon1" id="identity">
                    </div>
                    <br>
                    <div class="input-group">
                        <div class="input-group-addon">支付密码</div>
                        <input type="password" class="form-control" placeholder="支付密码" aria-describedby="basic-addon1" id="payment">
                    </div>
                    <br>
                </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save">保存</button>
                </div>
                </div>
            </div>
        </div>
        <div class="trans">
            <table class="table table-striped">
                <thead>
                <tr>
                    <td>流水号</td>
                    <td>时间</td>
                    <td>金额</td>
                    <td>用途</td>
                </tr>
                </thead>
                <tbody id="transContent">
                <tr>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!--分页-->
<nav aria-label="Page navigation" id="page">
    <ul class="pagination">
        <li>
            <a aria-label="Previous" id="back">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a  class="switchPage" value="1">1</a></li>
        <li><a  class="switchPage" value="2">2</a></li>
        <li><a  class="switchPage" value="3">3</a></li>
        <li><a  class="switchPage" value="4">4</a></li>
        <li><a  class="switchPage" value="5">5</a></li>
        <li>
            <a href="#" aria-label="Next" id="go">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
</body>
<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
<script src="../bootstrap3/js/bootstrap.min.js"></script>
<script>
    let id=sessionStorage.getItem("id")
    console.log(id)
    let Wallet={}//钱包
    let type=0
    let BankId=0//银行
    let value//分页数据
    function sendId(id){
        BankId=id
    }
    function sendType(Type1) {
        type=Type1
    }
    //初始数据
    $(document).ready(function(){
        $.ajax({//请求钱包数据
            url:'/wallet/GetBan/'+Number(id),//Number(id),
            type:'get',
            success: function (data){
                $("#money").html(data)
            }
        }),
            $.ajax({//银行卡数据
                url:'/bankcard/getInfo/'+Number(id),//Number(id),
                type: 'get',
                success: function (data){
                    Bank=data
                    let content
                    let content2
                    for (let i = 0; i < data.length; i++) {
                        content="<tr><td>"+data[i].bankNumber+"</td>"+
                            "<td>"+data[i].bankName+"</td>"+
                            "<td>"+data[i].bankBalance+"</td>"+
                            "<td> <button id='delete' type='button' class='btn btn-default' onclick='sendDeleteId("+data[i].bankid+")'>解绑</button></td></tr>"+content
                        content2="<tr><td>"+data[i].bankNumber+"</td>"+
                            "<td>"+data[i].bankName+"</td>"+
                            "<td>"+data[i].bankBalance+"</td>"+
                            "<td><button id='"+data[i].bankid+"' type='button' class='btn btn-default' onclick='sendId("+data[i].bankid+")'>选择</button></td></tr>"+content2
                    }
                    $("#content").html(content)
                    $("#chooseCharge").html(content2)
                }
            }),
            $.ajax({//流水数据
                url:'/trans/getAll/'+Number(id)+"/"+1+"/"+5,
                type:'get',
                success: function (data){
                    value=1
                    let content
                    for (let i = data.length-1; i >=0 ; i--) {
                        content="<tr><td>"+data[i].transid+"</td>"+
                            "<td>"+data[i].transTime+"</td>"+
                            "<td>"+data[i].transMoney+"</td>"+
                            "<td>"+data[i].transContent+"</td></tr>"+content
                    }
                    $("#transContent").html(content)
                }
            })
    })
    //插入银行卡
    $("#InsertCard").click(function (){
        let Bank2={
            bankid:0,
            userid: Number(id),
            bankNumber: $("#bankNumber").val(),
            bankName: $("#bankName").val(),
            bankBalance: $("#balance").val()
        }
        Bank2=JSON.stringify(Bank2)//转成json，因为开始是字符串
        $.ajax({
            url:'/bankcard/InsertNew',
            type:'post',
            data:Bank2,
            contentType: "application/json",//设置数据类型，不然传不过去
            success:function (data){
                alert(data)
                location.reload()

            }
        })
    })
    //充值
    $("#ToCharge").click(function (){
        let password=$("#password2").val()//获取密码
        $.ajax({
            url:'/wallet/pass/'+password+'/'+Number(id),
            type:'get',//验证密码正确性
            success:function (data) {
                if (data === '密码正确') {
                    if (type===0)
                    { $.ajax({
                        url: '/wallet/Recharge/' + $("#moneys").val() + '/' + Number(id) + '/' + BankId,//充值
                        type: 'get',
                        success: function (data) {
                            alert(data)
                            location.reload()
                        }
                    })}
                    else {
                        $.ajax({
                            url: '/wallet/change/'+ $("#rechargemoney").val() + '/' + Number(id) + '/' + BankId,//提现
                            type: 'get',
                            success: function (data) {
                                alert(data)
                                location.reload()
                            }
                        })
                    }
                }
                else {
                    alert(data)
                    location.reload()
                }
            }
        })
    })
    //解绑银行卡
    function sendDeleteId(id){
        BankId=id
        $.ajax({
            url:'/bankcard/Delete/'+BankId,
            type:'get',
            success: function (data){
                alert(data)
                location.reload()
            }})
    }
    //分页
    $(".switchPage").click(function (){
        value= Number($(this).attr('value'))
        $.ajax({
            url:'/trans/getAll/'+Number(id)+"/"+value+"/"+5,
            type:'get',
            success :function (data){
                let content
                for (let i = data.length-1; i >=0 ; i--) {
                    content="<tr><td>"+data[i].transid+"</td>"+
                        "<td>"+data[i].transTime+"</td>"+
                        "<td>"+data[i].transMoney+"</td>"+
                        "<td>"+data[i].transContent+"</td></tr>"+content
                }
                $("#transContent").html(content)
            }
        })
    })
    $("#back").click(function (){
        $.ajax({
            url:'/trans/getAll/'+Number(id)+"/"+(value-1)+"/"+5,
            type:'get',
            success :function (data){
                let content
                for (let i = data.length-1; i >=0 ; i--) {
                    content="<tr><td>"+data[i].transid+"</td>"+
                        "<td>"+data[i].transTime+"</td>"+
                        "<td>"+data[i].transMoney+"</td>"+
                        "<td>"+data[i].transContent+"</td></tr>"+content
                }
                $("#transContent").html(content)
            }
        })
    })
    $("#go").click(function (){
        $.ajax({
            url:'/trans/getAll/'+Number(id)+"/"+(value+1)+"/"+5,
            type:'get',
            success :function (data){
                let content
                for (let i = data.length-1; i >=0 ; i-- ) {
                    content="<tr><td>"+data[i].transid+"</td>"+
                        "<td>"+data[i].transTime+"</td>"+
                        "<td>"+data[i].transMoney+"</td>"+
                        "<td>"+data[i].transContent+"</td></tr>"+content
                }
                $("#transContent").html(content)
            }
        })
    })
    // 修改数据
    $("#updateWallet").click(function (){
        $("#toUpdate").click(function (){
            let password=$("#password1").val()//获取密码
            $.ajax({
                url:'/wallet/pass/'+password+'/'+Number(id),
                type:'get',//验证密码正确性
                success:function (data) {
                    if(data==='密码正确'){
                        $.ajax({
                            url:'/wallet/WalletInfo/'+Number(id),
                            type:'get',
                            success: function (data){
                                $("#show").click()
                                Wallet=data
                                $("#phone").val(data.phone)
                                $("#identity").val(data.identity)
                                $("#payment").val(data.payment)
                            }
                        })
                    }
                    else{
                        alert(data)
                        location.reload()
                    }
                }
            })
        })
    })
    $("#save").click(function (){
        let Wallet2={
            userid: Number(id),
            identity: $("#identity").val(),
            phone: $("#phone").val(),
            payment: $("#payment").val(),
            balance: Wallet.balance
        }
        Wallet2=JSON.stringify(Wallet2)
        $.ajax({
            url:'/wallet/UpdateInfo',
            type:'post',
            data:Wallet2,
            contentType: "application/json",//设置数据类型，不然传不过去
            success :function (data){
               alert(data)
                location.reload()
            }
        })
    })
</script>
</html>


